<template>
  <div>
    <!-- 顶部导航栏 -->
    <van-nav-bar title="影院" @click-left="$router.push('/cities')" fixed placeholder>
      <template #left>
        <div class="van-navbar-left">
          <span>{{ cityName }}</span><i class="iconfont icon-xia"></i>
        </div>
      </template>
      <template #right>
        <div class="van-navbar-right" :class="isTurnBlueClass" @click="isShowSearchBar = !isShowSearchBar">
          <i class="iconfont icon-sousuo"></i>
        </div>
      </template>
    </van-nav-bar>
    <!-- 下拉菜单 -->
    <van-dropdown-menu active-color="#ff5f16">
      <!-- 自定义下拉菜单内容 -->
      <van-dropdown-item v-model="districtId" :title="districtName" ref="district">
        <ul class="district-list">
          <li v-for="(item, index) in districtNameOptions" :key="item.value" :class="{active: activeButton === index}"
              @click="changeDistrict(item, index)">
            {{item.text}}
          </li>
        </ul>
      </van-dropdown-item>
      <van-dropdown-item v-model="ticketFlag" :options="ticketFlagOptions" @change="changeTicketFlag" />
      <van-dropdown-item v-model="recent" :options="recentOptions" />
    </van-dropdown-menu>
    <!-- 搜索框 -->
    <van-search v-model="cinemaKwd" v-fixedtop="46" placeholder="输入影院名称或地址" background="#f4f4f4" clear-trigger="always"
                show-action v-show="isShowSearchBar" @cancel="isShowSearchBar = false" />
    <!-- 影院列表 -->
    <cinema-list :cinemaKwd="cinemaKwd" :districtId="districtId"></cinema-list>
  </div>
</template>

<script>
import { NavBar, Search, DropdownMenu, DropdownItem } from 'vant'
import { mapState, mapActions } from 'vuex'
import { directiveMixins } from '@/mixins'
import CinemaList from './CinemaList.vue'

export default {
  name: 'CinemasView',
  mixins: [directiveMixins],
  components: {
    CinemaList,
    [NavBar.name]: NavBar,
    [Search.name]: Search,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem
  },
  data () {
    return {
      cinemaKwd: '',
      districtId: '',
      districtName: '全城',
      isShowSearchBar: false,
      ticketFlag: 1,
      ticketFlagOptions: [
        { text: 'APP订票', value: 1 },
        { text: '前台兑换', value: 2 }
      ],
      recent: 1,
      recentOptions: [
        { text: '最近去过', value: 1 },
        { text: '离我最近', value: 2 }
      ],
      activeButton: 0 // 当前激活按钮的索引值
    }
  },
  computed: {
    ...mapState('CityModule', ['cityId', 'cityName']),
    ...mapState('CinemaModule', ['cinemaList']),
    isTurnBlueClass () {
      return this.isShowSearchBar ? 'turn-blue' : ''
    },
    // 计算属性，动态计算城市中有多少个区域
    districtNameOptions () {
      // 获取所有列表中的区域对象，并存入数组
      let arr = this.cinemaList.map((cinema) => {
        return cinema.district
      })
      // 数组去重，并替换数组中的键名
      const obj = {} // 临时对象，用于存放并检测已存在的键
      // reduce：第一个参数是遍历需要执行的函数，第二个参数是item的初始值
      arr = arr.reduce((item, next) => {
        if (!obj[next.districtId]) {
          obj[next.districtId] = true
          item.push({ value: next.districtId, text: next.name })
        }
        return item
      }, [])
      arr.unshift({ text: '全城', value: '' })
      return arr
    }
  },
  methods: {
    ...mapActions('CinemaModule', ['getCinemaList']),
    // 改变购票类型时触发，最新加载影院列表
    changeTicketFlag (ticketFlag) {
      this.getCinemaList({ cityId: this.cityId, ticketFlag })
    },
    // 选中城市区域时触发
    changeDistrict ({ text, value }, index) {
      this.activeButton = index // 切换激活按钮索引值
      this.districtId = value // 改变区域
      this.districtName = text // 改变菜单项标题
      this.$refs.district.toggle(false) // 收缩下拉列表
    }
  }
}
</script>

<style lang="scss" scoped>
.turn-blue {
  color: #1989fa;
}
.district-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-left: 10px;
  li {
    width: calc(25vw - 12.5px);
    height: 30px;
    line-height: 30px;
    color: #797d82;
    font-size: 12px;
    text-align: center;
    border: 1px solid rgba(210, 214, 220, 0.5);
    border-radius: 4px;
    margin: 0 10px 15px 0;
    cursor: pointer;
    /* 激活按钮的样式 */
    &.active {
      color: #ff5f16;
      border: 1px solid #ff5f16;
    }
  }
}
</style>
